$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .main {
    margin: 220/$f+vw 200/$f+vw 120/$f+vw 200/$f+vw;

    .links {
      display: flex;


      a,
      p,
      span {
        color: #B8B8B8;
        font-size: 24/$f+vw;
        text-transform: uppercase;
      }

      a {
        transition: all 600ms;

        &:hover {
          color: #E60012;
        }
      }

      span {
        margin: 0 1vw;
      }
    }

    .section1{
      box-sizing: border-box;
      padding: 80/$f+vw;
      position: relative;
      z-index: 1;
      margin: 60/$f+vw 0 0 0;
      &:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 464/$f+vw;
        background: #F6F6F6;
        top: 0;
        left: 0;
        z-index: -1;
      }

      *{
        box-sizing: border-box;
      }
      .title{
        color: #1A202C;
        font-size: 40/$f+vw;
        font-weight: 500;
        line-height: 40/$f+vw; /* 100% */
        margin: 0 0 80/$f+vw;
        text-transform: uppercase;
      }
      .play_img{
        width: 947/$f+vw;
        height: 532/$f+vw;
        position: relative;
        margin: auto;

        #video{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .close {
          position: absolute;
          right: 2vw;
          top: 2vw;
          cursor: pointer;
          display: none;

          img {
            width: 30/$f+vw;
            display: block;
          }
        }
        .img{
          width: 100%;
        }
        .play{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 86/$f+vw;
          height: 86/$f+vw;
          cursor: pointer;
        }
      }
    }
    .section2{
      padding: 40/$f+vw 0 124/$f+vw 0;
      *{
        box-sizing: border-box;
      }
      display: flex;
      justify-content: space-between;
      .side{
        width: 413/$f+vw;
        .title{
          margin: 0 0 49/$f+vw;
          .line{
            width: 113/$f+vw;
            height: 4/$f+vw;
            background: #E60012;
            margin: 0 0 32/$f+vw;
          }
          h1{
            color: #1A202C;
            font-size: 40/$f+vw;
            font-style: normal;
            font-weight: 500;
            line-height: 40/$f+vw; /* 100% */
            text-transform: uppercase;
          }
        }
        .flex{
          width: 330/$f+vw;
          margin: 0 0 116/$f+vw;
          .item{
            &:not(:last-child) {
              margin: 0 0 35/$f+vw;
            }
            .show{
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 10/$f+vw 19/$f+vw 10/$f+vw;
              border-bottom: 2px solid #191919;
              cursor: pointer;
              p{
                color: #333;
                font-size: 19.375/$f+vw;
                font-weight: 500;
                line-height: 20/$f+vw; /* 103.226% */
              }
              svg{
                width: 14/$f+vw;
                height: 14/$f+vw;
                transform: rotate(90deg);
              }
            }
            .hide{
              overflow: hidden;
              &>div{
                margin: 35/$f+vw 0 0 0;
                .list{
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  &:not(:last-child) {
                    margin: 0 0 19/$f+vw;
                  }
                  .border{
                    width: 24/$f+vw;
                    height: 24/$f+vw;
                    border: 1px solid #C7C7C7;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 9/$f+vw 0 0;
                    transition: .6s;
                    svg{
                      width: 70%;
                      height: 70%;
                      opacity: 0;
                      transition: .6s;
                      path{
                        fill: #E94829;
                      }
                    }
                  }
                  &.on{
                    .border{
                      border: 1px solid #E94829;
                      svg{
                        opacity: 1;
                      }
                    }
                  }
                }
              }
            }
            &.on{
              .show{
                svg{
                  transform: rotate(-90deg);
                }
              }
            }
          }
        }

        .other{
          padding: 32/$f+vw;
          background: #F6F6F6;
          .list{
            &:not(:last-child) {
              margin: 0 0 24/$f+vw;
            }
            h1{
              color: #333;
              font-size: 20/$f+vw;
              font-weight: 500;
              line-height: 20/$f+vw; /* 100% */
            }
            img{
              margin: 31/$f+vw 0 0 0;
              display: block;
              width: 81/$f+vw;
            }
            p{
              color: #191919;
              font-size: 19.531/$f+vw;
              font-style: normal;
              font-weight: 300;
              line-height: 26/$f+vw; /* 133.12% */
              margin: 16/$f+vw 0 0 0;
            }
          }
        }
      }
      .r{
        width: 1020/$f+vw;
        .item{
          height: 218/$f+vw;
          padding: 60/$f+vw 0;
          border-bottom: 1px solid #C7C7C7;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:not(:last-child) {
            margin: 0;
          }
          .l{
            flex: 1;
            h1{
              color: #191919;
              font-size: 23.25/$f+vw;
              font-weight: 400;
              line-height: 36/$f+vw; /* 154.839% */
            }
            .dis{
              margin: 25/$f+vw 0 0 0;
              display: flex;
              align-items: center;
              .black{
                width: 117/$f+vw;
                height: 36/$f+vw;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFF;
                font-size: 16/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: 16/$f+vw; /* 100% */
                margin: 0 24/$f+vw 0 0;
                border-radius: 47/$f+vw;
                background: #191919;
              }
              p{
                color: #666;
                font-size: 16/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: 16/$f+vw; /* 100% */
              }
              span{
                width: 1px;
                height: 12/$f+vw;
                background: #666;
                display: block;
                margin: 0 22/$f+vw;
              }
            }
          }
          .more{
            display: flex;
            height: 60/$f+vw;
            padding: 21/$f+vw 46/$f+vw;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            border-radius: 90/$f+vw;
            background: #F6F6F6;
            color: #000;
            font-size: 18/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: 18/$f+vw; /* 100% */
            transition: .6s;
          }
          &:hover{
            .more{
              background: #E94829;
              color: #fff;
            }
          }
        }

        .pager {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5vw 0;

          .prev,
          .next {
            svg {
              display: block;
              width: 23/$f+vw;
            }
          }
          a{
            img{
              margin: 0 0 0 10px;
              display: block;
            }
          }
          a:nth-last-child(2) {
            img{
              margin: 0 10px 0 0 ;
            }
          }
          .nums {
            display: flex;
            margin: 0 1vw;

            a {
              color: rgba(139, 139, 139, 1);
              font-size: 20/$f+vw;
              padding: 0.1vw 0.5vw;
              margin: 0 0.2vw;

            }


            .active {
              color: #E94829;
              border-bottom: 2px solid #E94829;
              font-weight: 600;
            }
          }
        }
      }
      .r2{
        width: 1056/$f+vw;
        .item{
          background: #F5F6F7;
          position: relative;
          cursor: pointer;
          &:not(:last-child) {
            margin: 0 0 32/$f+vw;
          }
          &.on{
            .add{
              svg{
                &:first-child{
                  opacity: 0;
                }
                &:nth-child(2) {
                  opacity: 1;
                }
              }
            }
          }
          .add{
            position: absolute;
            bottom: 68/$f+vw;
            right: 32/$f+vw;
            z-index: 1;
            width: 40/$f+vw;
            height: 40/$f+vw;
            border-radius: 50%;
            svg{
              position: absolute;
              width: 100%;
              height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              transition: .3s;
              &:nth-child(2) {
                opacity: 0;
              }
            }
          }
          .show{
            width: 1056/$f+vw;
            height: 176/$f+vw;
            display: flex;
            align-items: center;
            padding: 0 0 0 32/$f+vw;
            h1{
              color: #333333;
              font-size: 24/$f+vw;
              font-style: normal;
              font-weight: 400;
              margin: 0 0 16/$f+vw;
            }
            p{
              color: #666;
              font-size: 18/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 36/$f+vw; /* 200% */
            }
          }
          .hide{
            overflow: hidden;
            margin-top: -30/$f+vw;
            display: none;
            &>div{
              padding: 0 32/$f+vw 80/$f+vw 32/$f+vw;
              p{
                color: #666;
                font-size: 18/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: 36/$f+vw; /* 200% */
              }
            }
          }
        }
        .pager {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 80/$f+vw  0 0 0 ;

          .prev,
          .next {
            svg {
              display: block;
              width: 23/$f+vw;
            }
          }
          a{
            img{
              margin: 0 0 0 10px;
              display: block;
            }
          }
          a:nth-last-child(2) {
            img{
              margin: 0 10px 0 0 ;
            }
          }
          .nums {
            display: flex;
            margin: 0 1vw;

            a {
              color: rgba(139, 139, 139, 1);
              font-size: 20/$f+vw;
              padding: 0.1vw 0.5vw;
              margin: 0 0.2vw;

            }


            .active {
              color: #E94829;
              border-bottom: 2px solid #E94829;
              font-weight: 600;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 100px;
    .main{
      margin: 0 5%;
      .links{
        a,p,span{
          font-size: 16px;
        }
      }
      .section1{
        padding: 20px;
        margin: 20px 0 0 0;
        &:after{
          height: 70%;
        }
        .title{
          font-size: 24px;
          line-height: 1;
          margin: 0 0 30px;
        }
        .play_img{
          width: 100%;
          height: 250px;
          .play{
            width: 45px;
            height: 45px;
          }
          .close{
            right: 15px;
            top: 15px;
            img{
              width: 20px;
            }
          }
        }
      }
      .section2{
        flex-direction: column;
        padding: 50px 0;
        .side{
          width: 100%;
          .title{
            margin: 0 0 35px;
            .line{
              width: 60px;
              height: 2px;
              margin-bottom: 3.2291666667vw;
            }
            h1{
              font-size: 32px;
              line-height: 1.2;
              margin: 0;
            }
          }
          .flex{
            width: 100%;
            margin: 0 0 30px;
            .item{

              .show{
                padding: 0 5px 15px 5px;
                p{
                  font-size: 16px;
                }
                svg{
                  width: 15px;
                  height: 15px;
                }
              }
              .hide{
                &>div{
                  margin: 20px 0;
                  .list{
                    &:not(:last-child) {
                      margin: 0 0 20px;
                    }
                    .border{
                      width: 25px;
                      height: 25px;
                      margin: 0 5px 0 0;
                    }
                  }
                }
              }
            }
          }
          .other{
            padding: 20px 10px;
            .list{
              &:not(:last-child) {
                margin: 0 0 20px;
              }
              h1{
                font-size: 16px;
                line-height: 1;
                margin: 0;
              }
              p{
                font-size: 14px;
                line-height: 1;
                margin: 15px 0 0 0;
              }
              img{
                margin: 10px 0 0 0;
                width: 50px;
              }
            }
          }
        }
        .r{
          width: 100%;
          .item{
            height: auto;
            padding: 25px 0;
            flex-direction: column;
            align-items: unset;
            .l{
              h1{
                font-size: 16px;
                line-height: 1.5;
                margin: 0;
              }
              .dis{
                margin: 20px 0 0 0;
                flex-wrap: wrap;

                .black{
                  width: 80px;
                  height: 26px;
                  font-size: 12px;
                  border-radius: 30px;
                  margin: 0 12px 8px 0;
                }
                p{
                  font-size: 12px;
                  line-height: 1;
                  margin: 0 8px 8px 8px;
                }
                span{
                  width: 1px;
                  height: 12px;
                  margin: 0 6px 6px 6px;
                }
              }
            }
            .more{
              padding: 10px 20px;
              margin: 25px 0 0 0;
              height: auto;
              font-size: 16px;
              line-height: 1;
              width: fit-content;
            }
          }
          .pager{
            margin: 30px 0 10px 0;
            .prev,.next{
              svg{
                width: auto;
              }
            }
            .nums{
              margin: 0 10px;
              a{
                font-size: 16px;
                padding: 3px 5px;
                margin: 0 5px;
              }
            }
          }
        }
        .r2{
          width: 100%;
          margin: 25px 0 0 0;
          .pager{
            margin: 30px 0 10px 0;
            .prev,.next{
              svg{
                width: auto;
              }
            }
            .nums{
              margin: 0 10px;
              a{
                font-size: 16px;
                padding: 3px 5px;
                margin: 0 5px;
              }
            }
          }
          .item{
            &:not(:last-child) {
              margin: 0 0 10px;
            }
            .add{
              width: 25px;
              height: 25px;
              --width: 13px;
              bottom: 23px;
              right: 5%;
              &:after{
                height: 1px;
              }
              &:before{
                width: 1px;
              }
            }
            .show{
              padding: 0 0 0 5%;
              height: 70px;
              width: 100%;
              h1{
                font-size: 16px;

              }
              p{
                display: none;

              }
            }
            .hide{

              margin-top: -20px;
              &>div{
                margin: 20px 5%;
                padding: 0;
                p{
                  font-size: 14px;
                  line-height: 1.7;
                }
              }
            }
          }
        }
      }
    }
  }
}